<template lang="pug">
el-form-item(
  :label="isFilter ? '' : label",
  :rules="rules",
  :prop="prop",
  :required="isRequired",
  v-if="!hidden",
  ref="formItem"
  style="padding:0;"
)
  upload-image( v-if="type==='updateImg'" :limit="1" :fileListUser="currentValue?[{url:currentValue,name:'头像'}]:[]" @success="imgeSuccess")
  el-date-picker(
    v-else-if="type === 'daterange' || type === 'monthrange' || type === 'date' || type === 'week' || type === 'month' || type === 'year' || type === 'datetime' || type === 'datetimerange'",
    v-model="currentValue",
    style="width: 100%",
    :type="type || 'date'",
    :placeholder="fieldProps.placeholder || `${label}`",
    range-separator="至",
    start-placeholder="开始时间",
    end-placeholder="结束时间",
    v-bind="fieldProps",
    v-on="events"
  )
  el-time-picker(
    v-else-if="type === 'timePicker'",
    v-model="currentValue",
    style="width: 100%",
    range-separator="至",
    start-placeholder="开始时间",
    end-placeholder="结束时间",
    placeholder="选择时间",
    v-bind="fieldProps",
    v-on="events"
  )
  year-range(
    v-else-if="type === 'yearrange'",
    @yearrangeChange="(val) => valChange(val)"
  )
  el-cascader(
    v-else-if="type === 'cascader'",
    v-model="currentValue",
    style="width: 100%",
    filterable,
    v-bind="fieldProps",
    v-on="events"
  )
  i-select.w(
    v-else-if="type === 'select'",
    :label="label",
    v-model="currentValue",
    v-bind="fieldProps",
    v-on="events",
    clearable
  )
  i-radio(
    v-else-if="type === 'radio'",
    v-model="currentValue",
    v-bind="fieldProps",
    v-on="events"
  )
  i-checkbox(
    v-else-if="type === 'checkbox'",
    v-model="currentValue",
    v-bind="fieldProps",
    v-on="events"
  )
  el-switch(
    v-else-if="type === 'switch'",
    v-model="currentValue",
    v-bind="fieldProps",
    v-on="events"
  )
  el-autocomplete(
    v-else-if="type === 'autocomplete'",
    v-model="currentValue",
    placeholder="请输入",
    :fetch-suggestions="(queryString, cb) => autoCompleteSearch(queryString, cb, options)",
    v-bind="fieldProps",
    v-on="events"
  )
  el-transfer(
    v-else-if="type === 'transfer'",
    v-model="currentValue",
    filter-placeholder="请输入",
    v-loading="fieldProps.loading || false",
    :titles="fieldProps.titles || ['可选列表', '已选列表']",
    :props="fieldProps.props || { key: 'value' }",
    v-bind="fieldProps",
    v-on="events"
  )
  upload-file(
    :filedList.sync="currentValue",
    v-else-if="type === 'upload'",
    :action="fieldProps.action || ''",
    v-bind="fieldProps",
    v-on="events"
  )
  el-image(
    v-else-if="type === 'img'",
    :src="currentValue",
    style="width: 96px; height: 96px; cursor: pointer",
    fit="fill",
    :preview-src-list="[currentValue]"
  )
  area-selector(
    v-else-if="type === 'area'",
    v-model="currentValue",
    v-bind="fieldProps",
    v-on="events"
  )
  markdown-editor(
    v-model="currentValue",
    v-bind="fieldProps",
    v-on="events",
    v-else-if="type === 'editor'"
  )
  el-button(v-else-if="type === 'button'", :size="fieldProps.size || 'small'")
  el-input-number(
    v-else-if="type === 'number'",
    v-model="currentValue",
    controls-position="right",
    :style="fieldProps.style",
    :max="fieldProps.max || Infinity",
    :min="fieldProps.min || 0",
    v-bind="fieldProps",
    v-on="events"
  )
  el-rate(
    v-else-if="type === 'rate'",
    v-model="currentValue",
    :show-score="true",
    v-bind="fieldProps",
    v-on="events"
  )
  router-link.c_primary(v-else-if="type === 'link'", :to="currentValue") {{ fieldProps.text }}
  span(v-else-if="type === 'text'") {{ currentValue }}
  ul(v-else-if="type === 'list'")
    li(v-for="el in currentValue", :key="el") {{ el }}
  el-input(
    v-else,
    :clearable="true",
    :type="type || 'text'",
    v-model="currentValue",
    :rows="fieldProps.rows || 4",
    :maxlength="fieldProps.maxlength || (type === 'textarea' ? 200 : 50)",
    :show-word-limit="type === 'textarea'",
    :placeholder="fieldProps.placeholder || `${label}`",
    v-bind="fieldProps",
    v-on="events"
    @change="$emit('inputProps', $event)"
  )
    span(v-if="fieldProps.suffix", slot="suffix") {{ fieldProps.suffix }}
    span(v-if="fieldProps.prefix", slot="prefix") {{ fieldProps.prefix }}
  el-image-viewer(
    v-if="previewVisible",
    :on-close="closeViewer",
    :url-list="previewUrl"
  )
  small.c_secondary.ml5(v-if="fieldProps.help", :style="fieldProps.helpStyle") {{ fieldProps.help }}
  a.f14(
    v-if="fieldProps.helpHtml",
    href="javascript:",
    @click="fieldProps.helpHandle",
    style="margin-left: 10px; vertical-align: middle"
  ) {{ fieldProps.helpHtml }}
</template>
<script>
import YearRange from './YearRange'
import UploadFile from './Upload/UploadFile'
// import E from 'wangeditor'
import AreaSelector from './AreaSelector'
import { dictMixin } from '@/mixins'
import { isObject } from '@/utils/types'
import MarkdownEditor from '../MarkdownEditor'
import UploadImage from '@/views/teachers/components/upload-image.vue'

export default {
  name: 'FormItem',
  components: {
    UploadImage,
    YearRange,
    UploadFile,
    AreaSelector,
    MarkdownEditor
  },
  inject: ['form'],
  mixins: [dictMixin],
  props: {
    isFilter: {
      type: Boolean,
      default: false
    },
    label: {
      type: String,
      default: ''
    },
    prop: {
      type: [String, Number],
      default: ''
    },
    required: {
      type: [Boolean, Object],
      default: false
    },
    hidden: {
      type: [Boolean, Function],
      default: false
    },
    rules: {
      type: [Object, Array],
      default: () => []
    },
    type: {
      type: String,
      default: ''
    },
    value: {
      type: [Number, String, Object, Array, Boolean, Date],
      default: ''
    },
    formData: {
      type: Object,
      default: () => ({})
    },
    fieldProps: {
      type: Object,
      default: () => ({})
    },
    events: {
      type: Object,
      default: () => ({})
    }
  },
  data () {
    return {
      previewUrl: [],
      previewVisible: false
    }
  },
  computed: {
    currentValue: {
      get () {
        return this.value
      },
      set (val) {
        this.$emit('input', val)
      }
    },
    isRequired () {
      const { required, formData } = this
      if (required && isObject(required)) {
        return Object.keys(required).every(
          (key) => formData[key] === required[key]
        )
      }
      return !!required
    }
  },
  watch: {
    currentValue (val) {
      if (this.fieldProps.changeHandle) {
        this.fieldProps.changeHandle(val)
      }
      this.$set(this.form?.baseData, this.prop, val)
    }
  },
  methods: {
    imgeSuccess (fileList) {
      console.log('currentValue', fileList)
      this.currentValue = fileList[0].response.data.url
    },
    // 时间区域输入值改变
    valChange (val) {
      this.currentValue = val
    },
    preview (url) {
      if (url) {
        this.previewUrl = [url]
        this.previewVisible = true
      }
    },
    closeViewer () {
      this.previewVisible = false
    },
    // 自动补齐
    autoCompleteSearch (queryString, cb, list) {
      const results = queryString
        ? list.filter((item) => {
          return (
            item.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
          )
        })
        : list
      // 调用 callback 返回建议列表的数据
      cb(results)
    }
  }
}
</script>
<style lang="scss" scoped>
.fileinput-button {
  position: relative;
  cursor: pointer;
  display: inline-block;
  overflow: hidden;
  margin-left: -4px;

  input {
    position: absolute;
    cursor: pointer;
    left: 0px;
    top: 0px;
    right: 0;
    bottom: 0;
    opacity: 0;
    z-index: 10000;
    cursor: pointer;
    -ms-filter: "alpha(opacity=0)";
  }
}
</style>
